<template>
  <el-popover :visible="visible" :virtualRef="virtualRef" placement="bottom" :width="400" trigger="click" virtual-triggering>
    <div class="org-popover-select">
      <el-input suffix-icon="Search"/>
      <div class="tree">
        <el-tree ref="orgSelectTreeRef" v-model="selectedKeys" :data="data" filterable default-expand-all show-checkbox check-strictly :props="treeProps"
                 node-key="organizationId"/>
      </div>
      <div class="selected-num">
        <div class="sum">
          已选<span>{{ 3 }}</span>
        </div>
        <el-button type="primary" size="small" @click="handleConfirm">
          确定
        </el-button>
      </div>
    </div>
  </el-popover>
</template>

<script>
import store from "@/store";

export default {
  name: "OrgPopoverSelect",
  props: {
    includeUser: {
      type: Boolean,
      default: true
    },
    virtualRef: {
      type: Object,
    },
    selected: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      selectedKeys: [],
      data: [],
      treeProps: {
        label: 'organizationName',
        disabled: (data, node) => {
          return data.disabled
        }
      }
    }
  },
  mounted() {
    const tree = store.getters['user/getOrganTree']
    this.data = tree
  },
  methods: {
    open({resolve}) {
      this.resolve = resolve
      this.visible = true
    },
    handleConfirm() {
      let checkedNodes = this.$refs.orgSelectTreeRef.getCheckedNodes()
      this.resolve(checkedNodes)
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>

.org-popover-select {
  display: flex;
  flex-direction: column;
  height: 300px;
  background: white;
  overflow: hidden;

  .tree {
    flex: 1;
    overflow: auto;
    padding: 10px 0;

  }

  .selected-num {
    border-top: 1px solid #F2F2F2;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .sum span {
      color: #3393D9;
      margin-left: 5px;
      font-size: 18px;
    }
  }
}
</style>
